<template>
    <div class="qilin-login">
        <div class="qilin-login-header">厚礼蟹后台管理</div>
        <div class="qilin-login-box">
            <div class="qilin-login-box-form">
                <Form ref="formLogin" :model="formLogin" :rules="formLoginRule">
                    <FormItem prop="username">
                        <Input v-model="formLogin.username" placeholder="请输入用户名"
                            prefix="md-contact"
                        ></Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input v-model="formLogin.password" placeholder="请输入密码"
                            type="password"
                        >
                            <Icon type="md-key" slot="prefix"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="code" class="qilin-login-box-form-code">
                        <Input v-model="formLogin.code" placeholder="请输入验证码" type="text"></Input>
                        <img v-if="codeImage" :src="codeImage" @click="getCodeImage"></img>
                    </FormItem>
                    <FormItem class="qilin-login-box-form-btn">
                        <Button type="primary" long shape="circle" @click="login">登录</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
import Qilin from "qilin-utils";
import {
    getCodeImage,
    login
} from "@/api/index.js";
export default {
    data(){
        return {
            formLogin:{ //登录相关配置
                username:"",
                password:"",
                code:"",
                uuid:""
            },
            formLoginRule:{ //表单校验规则
                username:[
                    {
                        required:true,
                        message:"请输入用户名",
                        trigger:"blur"
                    }
                ],
                password:[
                    {
                        required:true,
                        message:"请输入密码",
                        trigger:"blur"
                    }
                ],
                code:[
                    {
                        required:true,
                        message:"请输入验证码结果",
                        trigger:"blur"
                    }
                ]
            },
            codeImage:null, //验证码图片
        }
    },
    methods:{
        // 获取验证码图片
        getCodeImage(){
            getCodeImage().then((res)=>{
                if(res.code === 200){
                    this.codeImage="data:image/png;base64,"+res.img;
                    this.formLogin.uuid=res.uuid;
                };
            });
        },
        // 点击登录按钮事件监听
        login(){
            this.$refs["formLogin"].validate((valid)=>{
                if(valid){
                    login({
                        username:this.formLogin.username,
                        password:this.formLogin.password,
                        code:+this.formLogin.code,
                        uuid:this.formLogin.uuid
                    }).then((res)=>{
                        if(res.code === 200){
                            Qilin.Storage.setKeyValueLocalStorage("token",res.token);
                            this.$router.push("/");
                            this.$Message.success({
                                content:"登录成功",
                                background:true
                            });
                        }else{
                            this.$Message.error({
                                background:true,
                                content:res.msg || "系统错误"
                            });
                        };
                    });
                };
            });
        }
    },
    mounted(){
        this.getCodeImage();
    }
}
</script>
<style lang="scss" scoped>
.qilin-login{
    width: 400px;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 40%;
    left: 50%;
    >.qilin-login-header{
        width: 100%;
        color: #fff;
        font-size: 24px;
        font-weight: bolder;
        text-align: center;
        letter-spacing: 1px;
        padding: 20px;
    }
    >.qilin-login-box{
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
        >.qilin-login-box-form{
            padding:20px 20px 0 20px;
            ::v-deep .qilin-login-box-form-code>.ivu-form-item-content{
                display:flex;
                >div{
                    flex:1;
                }
                >img{
                    display:inline-block;
                    width:100px;
                    text-align:center;
                    margin-left:10px;
                    height:32px;
                }
            }
            .qilin-login-box-form-btn{
                text-align:center;
            }
        }
    }
}
</style>